<template>
  <div class="reports">
    <div class="reports-one">
      <div class="reports-one-btns">
        <Button
          @click="handleSearch(1)"
          class="search-btn one"
          type="primary"
          icon="ios-search"
          >安装数</Button
        >
        <Button
          @click="handleSearch(2)"
          class="search-btn two"
          type="primary"
          icon="ios-search"
          >故障数</Button
        >
        <Button
          @click="handleSearch(3)"
          class="search-btn three"
          type="primary"
          icon="ios-search"
          >总节电</Button
        >
        <Button
          @click="handleSearch(4)"
          class="search-btn four"
          type="primary"
          icon="ios-search"
          >总耗电</Button
        >
      </div>
      <line-echartxy eId="lineOne" :dataSource="oneData" />
    </div>
    <!-- <div class="reports-two">
      <line-echartxy eId="lineTwo" :dataSource="twoData" />
    </div> -->
  </div>
</template>
<script>
import LineEchartxy from "./LineEchartxycopy.vue";
export default {
  components: {
    LineEchartxy,
  },
  data() {
    return {
      oneData: {
        title: "总节电",
        name: "总节电",
        data: [
          { name: "石家庄市", value: 20057.34 },
          { name: "邢台市", value: 15477.48 },
          { name: "邯郸市", value: 31686.1 },
          { name: "保定市", value: 6992.6 },
          { name: "张家口市", value: 44045.49 },
          { name: "衡水市", value: 40689.64 },
          { name: "承德市", value: 37659.78 },
          { name: "秦皇岛市", value: 45180.97 },
          { name: "唐山市", value: 55204.26 },
          { name: "廊坊市", value: 21900.9 },
          { name: "沧州市", value: 4918.26 },
        ],
        colors: ["#fff", "#39f320"],
      },
    };
  },
  methods: {
    handleSearch(val) {
      switch (val) {
        case 1:
          this.oneData = {
            title: "总节电",
            name: "总节电",
            data: [
              { name: "石家庄市", value: 20057.34 },
              { name: "邢台市", value: 15477.48 },
              { name: "邯郸市", value: 31686.1 },
              { name: "保定市", value: 6992.6 },
              { name: "张家口市", value: 44045.49 },
              { name: "衡水市", value: 40689.64 },
              { name: "承德市", value: 37659.78 },
              { name: "秦皇岛市", value: 45180.97 },
              { name: "唐山市", value: 55204.26 },
              { name: "廊坊市", value: 21900.9 },
              { name: "沧州市", value: 4918.26 },
            ],
            colors: ["#fff", "#206af3"],
          };
          break;
        case 2:
          this.oneData = {
            title: "总节电",
            name: "总节电",
            data: [
              { name: "石家庄市", value: 20057.34 },
              { name: "邢台市", value: 15477.48 },
              { name: "邯郸市", value: 31686.1 },
              { name: "保定市", value: 6992.6 },
              { name: "张家口市", value: 44045.49 },
              { name: "衡水市", value: 40689.64 },
              { name: "承德市", value: 37659.78 },
              { name: "秦皇岛市", value: 45180.97 },
              { name: "唐山市", value: 55204.26 },
              { name: "廊坊市", value: 21900.9 },
              { name: "沧州市", value: 4918.26 },
            ],
            colors: ["#fff", "#f37420"],
          };
          break;
        case 3:
          this.oneData = {
            title: "总节电",
            name: "总节电",
            data: [
              { name: "石家庄市", value: 20057.34 },
              { name: "邢台市", value: 15477.48 },
              { name: "邯郸市", value: 31686.1 },
              { name: "保定市", value: 6992.6 },
              { name: "张家口市", value: 44045.49 },
              { name: "衡水市", value: 40689.64 },
              { name: "承德市", value: 37659.78 },
              { name: "秦皇岛市", value: 45180.97 },
              { name: "唐山市", value: 55204.26 },
              { name: "廊坊市", value: 21900.9 },
              { name: "沧州市", value: 4918.26 },
            ],
            colors: ["#fff", "#39f320"],
          };
          break;
        case 4:
          this.oneData = {
            title: "总节电",
            name: "总节电",
            data: [
              { name: "石家庄市", value: 20057.34 },
              { name: "邢台市", value: 15477.48 },
              { name: "邯郸市", value: 31686.1 },
              { name: "保定市", value: 6992.6 },
              { name: "张家口市", value: 44045.49 },
              { name: "衡水市", value: 40689.64 },
              { name: "承德市", value: 37659.78 },
              { name: "秦皇岛市", value: 45180.97 },
              { name: "唐山市", value: 55204.26 },
              { name: "廊坊市", value: 21900.9 },
              { name: "沧州市", value: 4918.26 },
            ],
            colors: ["#fff", "#eff320"],
          };
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.reports {
  width: 100%;
  height: 100%;
  background: #fff;
  .reports-one,
  .reports-two {
    width: 100%;
    height: 100%;
    position: relative;
    .reports-one-btns {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      z-index: 2;
      .search-btn {
        margin-bottom: 10px;
      }
      .search-btn.one {
        background-color: #206af3;
        border-color: #206af3;
      }
      .search-btn.two {
        background-color: #f37420;
        border-color: #f37420;
      }
      .search-btn.three {
        background-color: #39f320;
        border-color: #39f320;
      }
      .search-btn.four {
        background-color: #eff320;
        border-color: #eff320;
      }
    }
  }
}
</style>
